<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: 'index' }">
          产成品统计分析详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="top ">
        <StrokeTitle title="统计分析" class="float margin" style="width: 63.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="Echarts flex_center">
            <PieImg style="width: 53%" itemWidth="1.1" cirLeft="center" legendLeft="10%" cirTop="0.2" orient="horizontal" legendBottom="10%"/>
            <div class="backBor"></div>
            <div class="chanliang_box flex_center_direction">
              <StrokeOrnament title="产量最多"></StrokeOrnament>
              <div class="chanliang_item flex_center">
                <div class="chanliang_item_left flex_center_direction">
                  <img src="../../assets/images/echarts/chanchengpin.png" alt="">
                  <div class="title">
                    产成品一
                  </div>
                </div>
                <div class="chanliang_item_right flex_center">
                  <div class="item flex_center_direction">
                    <div class="number text_shadow">{{ $formatNum("232432") }}</div>
                    <div class="title">产量</div>
                  </div>
                  <div class="backBor"></div>
                  <div class="item flex_center_direction" v-if="1==1">
                    <div class="number text_shadow fontSize">{{22}}%
                      <img src="../../assets/images/echarts/sheng.png" alt="">
                    </div>
                    <div class="title">占比</div>

                  </div>
                  <div class="item flex_center_direction" v-else>
                    <div class="number text_shadow_danger">{{22}}%
                      <img src="../../assets/images/echarts/jiang.png" alt="">
                    </div>
                    <div class="title">占比</div>

                  </div>
                </div>
              </div>
              <StrokeOrnament title="产量最多"></StrokeOrnament>
              <div class="chanliang_item flex_center">
                <div class="chanliang_item_left flex_center_direction">
                  <img src="../../assets/images/echarts/chanchengpin.png" alt="">
                  <div class="title">
                    产成品一
                  </div>
                </div>
                <div class="chanliang_item_right flex_center">
                  <div class="item flex_center_direction">
                    <div class="number text_shadow fontSize">{{ $formatNum("232432") }}</div>
                    <div class="title">产量</div>
                  </div>
                  <div class="backBor"></div>
                  <div class="item flex_center_direction" v-if="1==2">
                    <div class="number text_shadow">{{22}}%
                      <img src="../../assets/images/echarts/sheng.png" alt="">
                    </div>
                    <div class="title">占比</div>

                  </div>
                  <div class="item flex_center_direction" v-else>
                    <div class="number text_shadow_danger">{{22}}%
                      <img src="../../assets/images/echarts/jiang.png" alt="">
                    </div>
                    <div class="title">占比</div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="单一产量最大基地" class="float margin" style="width: 34.5%">
          <div style="width:100%;height:100%" class="flex_center">
            <div class=" clzdjd_box">
              <div class="clzdjd_item flex_center" v-for="(item,index) in 3" :key="index">
                <div class="clzdjd_item_left flex_between">
                  <!-- 左侧圆球 -->
                  <div class="bigCir flex_center">{{index+1}}</div>
                  <!-- 竖线 -->
                  <div class="border"></div>
                  <!-- 小圆 -->
                  <div class="smallCir flex_center">
                    <div> </div>
                  </div>
                </div>
                <div class="clzdjd_item_right flex_center">
                  <div class="clzdjd_item_right_water flex_center_direction">
                    <div class="water2 flex_center">
                      {{11+index*2}}%
                      <img class="bigCir" src="../../assets/images/echarts/baijiang.png" alt="">
                    </div>
                  </div>
                  <div class="clzdjd_item_right_content flex_center">
                    <div class="item flex_center_direction">
                      <img src="../../assets/images/echarts/chanchengpin.png" alt="">
                      <div class="title">
                        产成品一
                      </div>
                    </div>
                    <div class="backBor"></div>
                    <div class="item flex_center_direction">
                      <img src="../../assets/images/echarts/chanchengpin.png" alt="">
                      <div class="title">
                        产成品一
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>

      </div>
      <div class="bottom">
        <StrokeTitle title="当年十二月产成品种类趋势" class="float margin" style="width: 33.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
           <div class="Echarts">
            <ELine />
          </div>
        </StrokeTitle>
         <StrokeTitle title="计划外产成品统计分析" class="float margin" style="width: 64.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
             <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
           <div class="Echarts flex_center">
             <XRow style="width: 49%;height:85%"></XRow>
             <div class="backBor"></div>
              <PieImg style="width: 49%" itemWidth="1" legendType="" legendLeft="50%" length="7"/>
          </div>
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "month",
      RadioOptions: [
        {
          value: "month",
          label: "当月",
        },
        {
          value: "year",
          label: "当季",
        },
        {
          value: "zi",
          label: "自定义",
        },
      ],
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      data3: [
        { name: "已签收", value1: 33 },
        { name: "配送中", value1: 53 },
        { name: "已出库", value1: 78 },
        { name: "采购中", value1: 12 },
        { name: "接单中", value1: 90 },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>
<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .top {
      width: 100%;
      height: 54%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .chanliang_box {
        width: 47%;
        height: 90%;
        // background: red;
        max-height: 300px;
        .chanliang_item {
          width: 100%;
          height: 30%;
          background: red;
          max-width: 385px;
          max-height: 124px;
          background: linear-gradient(
            180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%
          );
          border: 1px solid rgba(52, 134, 218, 0.6);
          margin: 14px 0 30px 0;
          .chanliang_item_left {
            width: 30%;
            // background: red;
            height: 100%;
            border-bottom: 2px solid #00c0ff;
            img {
              width: 50%;
            }
            .title {
              font-size: 16px;
              color: #ffffff;
            }
          }
          .chanliang_item_right {
            width: 68%;
            height: 70%;
            position: relative;
            // background: red;
            .item {
              width: 48%;
              height: 60%;
              .number {
                font-weight: 700;
                text-shadow: none;
                letter-spacing: 1px;
                position: relative;
                img {
                  position: absolute;
                  width: 10px;
                }
              }
              .title {
                color: #ffffff;
                margin-top: 3px;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .clzdjd_box {
      width: 100%;
      height: 80%;
      max-height: 350px;

      .clzdjd_item {
        height: 100%;
        height: 30%;
        margin: 0 0px 14px 0;
        .clzdjd_item_left {
          width: 13%;
          height: 100%;
          max-width: 385px;
          max-height: 124px;
          position: relative;
          .bigCir {
            width: 50px;
            height: 50px;
            background: url("../../assets/images/echarts/yuanquan.png");
            background-size: 100% 100%;
            color: #ffffff;
          }
          .index {
            position: absolute;
            color: #ffffff;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
          }
          .border {
            width: 1px;
            height: calc(100% + 14px);
            background: #42a9ff;
            position: absolute;
            right: 0;
            top: 50%;
          }
          .smallCir {
            width: 13px;
            height: 13px;
            background: rgba(66, 169, 255, 0.3);
            border-radius: 50%;
            position: relative;
            left: 5px;
            div {
              width: 7px;
              height: 7px;
              background: #42a9ff;
              border-radius: 50%;
            }
          }
        }
        .clzdjd_item_right {
          width: 66%;
          height: 100%;
          margin-left: 6%;
          max-width: 435px;
          max-height: 124px;
          background: linear-gradient(
            180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%
          );
          border: 1px solid rgba(52, 134, 218, 0.6);
          //  background: red;
          .clzdjd_item_right_water {
            width: 30%;
            // background: red;
            height: 100%;
            border-bottom: 2px solid #00c0ff;
            .water2 {
              width: 70px;
              height: 70px;
              font-size: 22px;
              color: #ffffff;
              position: relative;
              img {
                position: absolute;
                width: 7px;
                right: 7px;
                top: 22px;
              }
            }
          }
          .clzdjd_item_right_content {
            width: 68%;
            height: 70%;
            position: relative;
            // background: red;

            .item {
              width: 48%;
              height: 60%;
              img {
                width: 50%;
              }
              .title {
                font-size: 14px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .clzdjd_item:last-child .border {
        width: 0 !important;
      }
    }
    .bottom {
      width: 100%;
      height: 42%;
    }
  }
}
</style>

